<template>
  <div>
    <el-form ref="queryCondition" :model="queryCondition" label-width="auto">
      <el-row :gutter="12">
        <el-col :span="4" :offset="1">
          <el-form-item prop="applierSml" label="名称">
            <el-input v-model.trim="queryCondition.applierSml"> </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item prop="operateStates" label="类别">
            <el-select v-model="queryCondition.operateStates"> </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item prop="auditStates" label="截止时间">
            <el-select v-model="queryCondition.auditStates"> </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="2">
          <el-form-item label-width="10px">
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="queryByCondition(1)"
              >查询
            </el-button>
          </el-form-item>
        </el-col>
        <el-col :span="1">
          <el-form-item label-width="0">
            <el-button
              type="warning"
              icon="el-icon-refresh"
              @click="() => $refs.queryCondition.resetFields()"
            >
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-button @click="$refs.outStockInsert.appear()">ApplyInsert</el-button>
    <out-stock-insert ref="outStockInsert" @post-insert="queryByCondition"></out-stock-insert>
    <el-table
      :data="results"
      ref="resultsTable"
      height="480px"
      stripe
      highlight-current-row
      @row-click="rowClick"
      @selection-change="selectionChange"
    >
      <el-table-column type="selection" align="center"></el-table-column>

      <el-table-column type="expand">
        <template #default="{ row }">
          <el-descriptions border>
            <el-descriptions-item label="填充1">具体信息1</el-descriptions-item>
            <el-descriptions-item label="outStockCode">{{
              row.outStockCode
            }}</el-descriptions-item>
          </el-descriptions>
        </template>
      </el-table-column>

      <el-table-column prop="outStockCode" label="ID/Code"></el-table-column>

      <el-table-column
        label="operateState"
        :formatter="operateStateFormat"
        align="center"
      >
      </el-table-column>
      <el-table-column width="180px" fixed="left">
        <template #default="{ row }">
          <el-button
            size="mini"
            type="warning"
            icon="el-icon-edit"
            @click="openById(row.outStockCode)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-edit"
            @click="deleteById(row.outStockCode)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :total="total"
      :page-size="queryCondition.pageSize"
      :current-page.sync="queryCondition.pageNum"
      @current-change="queryByCondition"
      :page-sizes="[8, 10, 20, 50]"
      @size-change="sizeChange"
      layout="sizes,total, prev, pager, next, jumper"
    ></el-pagination>
<!--    <el-input placeholder="billCode" v-model="code"></el-input>-->
<!--    <el-button @click="openToModify">ApplyModify</el-button>-->
    <out-stock-modify ref="outStockModify"></out-stock-modify>
  </div>
</template>

<script>
import OutStockInsert from "@/components/erp/OutStockInsert";
import OutStockModify from "@/components/erp/OutStockModify";
/**
 * 页面核心数据结构体说明文档
 * {
  "applierSml": "",
  "auditStates": [
    "NA"
  ],
  "operateStates": [

  ],
  "pageNum": 1,
  "pageSize": 5
}
 * http://localhost:9092/erp/outStock/query/apply
 * {
  "total": 4,
  "results": [
    {
      "outStockCode": "OS20220223956100010",
      "totalAmount": 2000640,
      "abandoned": false,
      "version": 1,
      "storeHouse": "南仓11-12",
      "applyDepartment": "produce",
      "applier": "lisi",
      "comment": "请提前准备全",
      "outStockTime": "2022-02-23T16:00:00",
      "billOperator": "anonymousUser",
      "operateState": "notSubmit",
      "billAuditor": null,
      "auditState": "NA",
      "outStockMaterialDetails": [
        {
          "materialCode": "MM20220223802600008",
          "materialName": "万向轮",
          "unit": "枚",
          "quantity": 4,
          "unitPrice": 100,
          "amount": 400,
          "outStockMaterialDetailId": {
            "detailNo": 1
          }
        },
        {
          "materialCode": "MM20220223648500009",
                "materialName": "液相色谱仪",
          "unit": "台",
          "quantity": 4,
          "unitPrice": 500000,
          "amount": 2000000,
          "outStockMaterialDetailId": {
            "detailNo": 2
          }
        }]}
 *
 */
// import New from './components/New.vue';
export default {
  name: "OutStockApply",
  components: {
    OutStockModify,
    OutStockInsert,
  },
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      code: "OS20220223438100009",
      queryCondition: {
        applierSml: null,
        auditStates: null,
        operateStates: null,
        pageNum: 1,
        pageSize: 5,
      },
      results: [],
      total: 0,
    };
  },
  computed: {
    // sampleC() {
    //     return this.sampleD+'--';
    // }
  },
  created() {},
  mounted() {},
  methods: {
    queryByCondition(pageNum) {
      if (pageNum) this.queryCondition.pageNum = pageNum;
      //todo: arrange into apis
      this.$http({
        method: "post",
        url: "http://localhost:9092/erp/outStock/query/apply",
        data: this.queryCondition,
      }).then(
        (res) => {
          this.total = res.data.total;
          this.results = res.data.results;
        },
        (error) => {
          this.$message.warning("query error: " + error.response.status);
        }
      );
    },

    openById(code) {
      this.$http({
        method: "get",
        url: `http://127.0.0.1:9092/erp/outStock/find/${code}`,
      }).then(
        (res) => {
          this.$message.warning(JSON.stringify(res.data));
          this.$refs.outStockModify.outStockBill = res.data;
          this.$nextTick(() => {
            this.$refs.outStockModify.appear();
          });
        },
        (error) => {
          console.log(".sam request error : " + error.response.status);
        }
      );
    },
  },
  watch: {
    // sampleC(newValue, oldValue) {
    //
    // }
  },
};
</script>

<!--<style scoped>-->
<style lang="scss" scoped></style>
